<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper">
            <view class="flex-col flex-row wraper-col">
                <view class="flex-row box">
                    <view class="u-line-1 text">{{self.name}}</view>
                    <view class="box-col">
                        <view class="u-line-1 text-two">{{self.relation}}</view>
                    </view>
                </view>
                <view class="u-line-1 text-three">{{self.number}}</view>
            </view>
            <view class="flex-col wraper-col-two"  @click="cutPat">
                <u-icon class="icon-list" name="list"></u-icon>
                <view class="u-line-1 text-four">切换就诊人</view>
            </view>
        </view>
        <view class="flex-row wrapper-two">
            <view class="wraper-col-three">
                <view class="u-line-1 text-five">近一年</view>
            </view>
            <view class="wraper-col-four">
				<uni-datetime-picker type="daterange" v-model="single">
					<view class="u-line-1 text-six" @click="cutDate">选择时间</view>
				</uni-datetime-picker>
            </view>
        </view>
		<text v-for="medical in medical" style="margin-top: 2%;">
			<view class="flex-col wrapper-four" @click="medicaDetails(medical.id)">
				<view class="u-line-1 text-fourteen" v-if="!!medical.setMeal">{{medical.setMeal.setMealName}}</view>
				<view class="u-line-1 text-fifteen">{{medical.state}}</view>
				<u-line class="line" margin="0rpx 0rpx 24rpx 0rpx"></u-line>
				<view class="flex-row wraper-row-four">
					<view class="u-line-1 text-sixteen">{{medical.updateTime}}</view>
					<view class="u-line-1 text-seventeen">就诊时间</view>
				</view>
				<view class="flex-row wraper-row-five">
					<view class="u-line-1 text-eighteen" v-if="!!medical.thePatient">{{medical.thePatient.name}}</view>
					<view class="u-line-1 text-nineteen">就诊人</view>
				</view>
			</view>
			<view v-if="medical.state == '已完成'">
				<!-- <u-line class="line-two" margin="0rpx 0rpx 20rpx 0rpx"></u-line> -->
				<u-button type='success' class="button" @click="medicalReport(medical)">
					查看报告
				</u-button>
			</view>
		</text>
		
		<!-- 切换就诊人弹出框 -->
		<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate">
			<view class="popopBox">
				<scroll-view
					scroll-y="true"
					style="height: 50rpx;"
					scroll-with-animation="true"
				>
				</scroll-view>
				<view @click="cutPatient(patient.id)" class="flex-row wrapper" v-for="patient in patient">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view class="u-line-1 text">{{patient.name}}</view>
							<view class="flex-row box-col">
								<view class="u-line-1 text-two">{{patient.relation}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{patient.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
    </view>
</template>
<script>
    export default {
        data() {
            return {
				isCut:false,
				URL: 'http://localhost:9000/', //主域名
				self: '',
				single:'',
				patient:[],
				record:[],
				medical:[],
				user:'',
			}
        },
		watch:{
			single (newLength, oldLength) {
				this.single = newLength
			    console.log(newLength[0])
			    console.log(newLength[1])
				var begin = newLength[0]//获取开始时间
				var end = newLength[1]//获取结束时间
				
				this.medicalRecord(this.self.id , begin , end)
		
			}
		},
        methods: {
			
			medicalReport(medical){
				console.log("id" , this.self.id)
				console.log("项目" , medical.setMeal.setMealName)
				console.log("姓名" , this.self.name)
				console.log("报告日期" , medical.updateTime)
				uni.navigateTo({
					url:'medicalReport?id='+this.self.id+'&setMealName='+medical.setMeal.setMealName+'&name='+this.self.name+'&updateTime='+medical.updateTime+'&number='+this.self.number
				})
			},
			
			medicaDetails(id){
				uni.navigateTo({
					url:'detectionDetails?mId='+id+'&nId='+0
				})

			},
			
			//查询体检记录
			medicalRecord(id , begin , end){
				uni.request({
					url: this.URL + "appointment/appointment/medical-appointment/medicalRecord/" + id + "/"+ begin + "/" + end,
					method:"GET",
					success: (res) => {
						console.log("medicalRecord" , res)
						if (res.data.code == 20000) {
							this.medical = res.data.data.medical
							console.log("medical" , this.medical)
						}
					}
				})
			},
			
			//切换日期
			cutDate(){
				this.isDate = !this.isDate
			},
			
			//切换就诊人
			cutPat(){
				this.isCut = !this.isCut
			},
			
			//切换就诊人
			cutPatient(id){
				console.log(id)
				for (var i = 0; i < this.patient.length; i++) {
					if(id == this.patient[i].id){
						this.self = this.patient[i]
					}
				}
				this.isCut = false
				console.log(this.self)
				this.medicalRecord(this.self.id)
			},

        },
		onLoad(id) {
			//console.log(id.id)
			this.user = uni.getStorageSync('user')
			// 获取当前用户绑定的就诊人
			uni.request({
				url: this.URL + "user/user/the-patient/patientByUserId/" + this.user.id,
				method: "GET",
				success: (res) => {
					console.log(res)
					if (res.data.code == 20000) {
						this.record = res.data.data.patientList
						this.patient = res.data.data.patientList
						for (var i = 0; i < this.record.length; i++) {
							if (this.record[i].relation == "本人") {
								this.self = this.record[i]
							}
						}
						console.log(this.self)
						this.medicalRecord(this.self.id)
					}
				}
			})
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        height: 1334rpx;
        padding: 40rpx 0rpx 0rpx 21rpx;

        .wrapper {
            width: 698rpx;
            justify-content: space-between;
            margin-bottom: 40rpx;
            padding: 19rpx 40rpx 19rpx 30rpx;
            background: #f5f9ff;

            .wraper-col {
                width: 224rpx;
                margin-top: 8rpx;

                .box {
                    width: 198rpx;
                    margin-bottom: 22rpx;

                    .text {
                        width: 116rpx;
                        margin-right: -8rpx;
                        font-size: 32rpx;
                    }

                    .box-col {
                        width: 90rpx;
                        margin-top: 4rpx;
                        padding: 2rpx 0rpx 2rpx 15rpx;
                        border-radius: 40rpx;
                        background: #e2edfe;

                        .text-two {
                            width: 70rpx;
                            letter-spacing: 4rpx;
                            color: #6d70ff;
                        }
                    }
                }

                .text-three {
                    width: 100%;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }
            }

            .wraper-col-two {
                width: 144rpx;
                padding: 30rpx 0rpx 12rpx 18rpx;

                .icon-list {
                    width: 28rpx;
                    margin: 0rpx 0rpx 16rpx 40rpx;
                }

                .text-four {
                    width: 100%;
                    font-size: 2rpx;
                }
            }
        }

        .wrapper-two {
            width: 300rpx;
            justify-content: space-between;
            margin: 0rpx 0rpx 30rpx 10rpx;

            .wraper-col-three {
                width: 122rpx;
                height: 44rpx;
                padding-left: 17rpx;
                border-radius: 40rpx;
                background: #006eff;

                .text-five {
                    width: 96rpx;
                    color: #fdfeff;
                }
            }

            .wraper-col-four {
                width: 154rpx;
                padding: 2rpx 0rpx 0rpx 23rpx;
                border-radius: 40rpx;
                background: #e4f0ff;

                .text-six {
                    width: 116rpx;
                    color: #006eff;
                }
            }
        }

        .wrapper-three {
            width: 698rpx;
            margin: 0rpx 0rpx 66rpx 4rpx;
            padding: 30rpx 13rpx 32rpx 13rpx;
            background: #ffffff;

            .wraper-row {
                width: 658rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text-seven {
                    width: 480rpx;
                    font-size: 32rpx;
                }

                .text-eight {
                    width: 122rpx;
                    font-size: 28rpx;
                    color: #006eff;
                }
            }

            .line {
                width: 100%;
            }

            .wraper-row-two {
                width: 402rpx;
                margin: 0rpx 0rpx 20rpx 122rpx;

                .text-nine {
                    width: 100%;
                    font-size: 2rpx;
                }

                .text-ten {
                    width: 130rpx;
                    top: 0rpx;
                    left: -122rpx;
                    font-size: 2rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .wraper-row-three {
                width: 402rpx;
                margin-left: 122rpx;

                .text-eleven {
                    width: 100%;
                    font-size: 2rpx;
                }

                .text-twelve {
                    width: 130rpx;
                    height: 32rpx;
                    top: 0rpx;
                    left: -122rpx;
                    font-size: 2rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .text-thirteen {
                top: 16rpx;
                left: -26rpx;
                position: absolute;
            }
        }

        .wrapper-four {
            width: 698rpx;
            margin-left: 4rpx;
            padding: 30rpx 13rpx 24rpx 13rpx;
            background: #ffffff;

            .text-fourteen {
                width: 480rpx;
                margin: 0rpx 0rpx -38rpx 6rpx;
                font-size: 32rpx;
            }

            .text-fifteen {
                width: 122rpx;
                margin: 0rpx 0rpx 30rpx 542rpx;
                font-size: 28rpx;
                color: #006eff;
            }

            .line {
                width: 100%;
            }

            .wraper-row-four {
                width: 402rpx;
                margin: 0rpx 0rpx 20rpx 122rpx;

                .text-sixteen {
                    width: 100%;
                    font-size: 2rpx;
                }

                .text-seventeen {
                    width: 130rpx;
                    top: 0rpx;
                    left: -122rpx;
                    font-size: 2rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .wraper-row-five {
                width: 402rpx;
                margin: 0rpx 0rpx 20rpx 122rpx;

                .text-eighteen {
                    width: 100%;
                    font-size: 2rpx;
                }

                .text-nineteen {
                    width: 130rpx;
                    height: 32rpx;
                    top: 0rpx;
                    left: -122rpx;
                    font-size: 2rpx;
                    position: absolute;
                    color: #aaaaaa;
                }
            }

            .line-two {
                width: 646rpx;
            }

            .button {
                width: 196rpx;
                height: 68rpx;
                margin-left: 458rpx;
                font-size: 28rpx;
                background: #006eff;
                color: #ffffff;
            }
        }
    }
</style>